<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>角色列表</title>
    <header th:replace="header::html"></header>
</head>

<body class="">
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">角色</a>
            <a>
              <cite>角色列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<div class="layui-fluid">
    <div class="layui-row  layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form  layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入角色名" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>

                <div class="layui-card-header">
                    <button class="layui-btn" onclick="xadmin.open('新增角色','/api-back/role/add')"
                            permission="sys:role:add"><i
                            class="layui-icon"></i>新增角色
                    </button>
                </div>

                <div class="layui-card-body ">
                    <table class="layui-hide" id="table" lay-filter="member"></table>
                </div>

                <div class="layui-card-body ">
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit" permission="sys:role:edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
                           permission="sys:role:del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

	layui.use('table', function () {
		var table = layui.table,
			form = layui.form;
		table.render({
			elem: '#table'
			, url: '/api-back/role/list' //数据接口
			, page: true //开启分页
			, response: {
				countName: 'count', //规定数据总数的字段名称，默认：count
				dataName: 'datas' //规定数据列表的字段名称，默认：data
			}
			, cols: [
				[ //表头
					{type: 'checkbox', fixed: 'left'}
					, {field: 'id', title: 'ID', width: 60, align: 'center'}
					, {field: 'name', title: '角色名'}
					, {field: 'description', title: '描述'}
					// ,{field: 'status', title: '状态', width:120}
					//, {field: 'updateTime', title: '最后操作时间'}
					, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
				]
			]
		});

		//监听工具条
		table.on('tool(member)', function (obj) {
			var data = obj.data;
			if (obj.event === 'del') {
				layer.confirm('真的删除行么', function (index) {
					$.ajax({
						url: "/api-back/role/delete",
						type: "GET",
						data: {id: data.id},
						dataType: 'json',
						success: function (result) {
							if (result.code == 200) {
								layer.alert("删除成功", {icon: 1}, function (index1) {
									layer.close(index1);
									//xadmin.father_reload();
									table.reload('table');
								});
							} else {
								layer.alert(result.msg);
							}

						},
					});
				});
			} else if (obj.event === 'edit') {
				xadmin.open('编辑用户信息', '/api-back/role/edit/?id=' + data.id);
			}
		});

		//搜索
		form.on('submit(search)', function (data) {
			var username = data.field.username;
			table.render({
				elem: '#table'
				, url: '/api-back/role/findRoleByFuzzyRoleName' //数据接口
				, page: true //开启分页
				, where: {
					"roleName": username
				}, response: {
					dataName: 'datas' //规定数据列表的字段名称，默认：data
				}
				, cols: [
					[ //表头
						{type: 'checkbox', fixed: 'left'}
						, {field: 'id', title: 'ID', width: 60, align: 'center'}
						, {field: 'name', title: '角色名'}
						, {field: 'description', title: '描述'}
						// ,{field: 'status', title: '状态', width:120}
						//, {field: 'updateTime', title: '最后操作时间'}
						, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
					]
				]
			});
			return false;
		});
		// checkPermission()
	});
</script>
</body>
</html>